<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>JUL + SmartClient Example</title>
<style type="text/css">
	html, body {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		background-color: #fff;
	}
	body * {
		font-family:  "Helvetica",Helvetica, sans-serif;
		font-size: 13px;
		color: #111;
	}
	#content {
		width: 960px;
		height: 580px;
		margin: 10px auto;
		padding: 15px 25px;
		text-align: center;
	}
	#footer {
		text-align: center;
		font-size: x-small;
	}
	</style>
	<script type="text/javascript" src="../js/jul.min.js"></script>
<script type="text/javascript">
var isomorphicDir="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/smartclient/isomorphic/";
var isc_useSimpleNames = false;
</script>
<script type="text/javascript" src="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/smartclient/isomorphic/system/modules/ISC_Core.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/smartclient/isomorphic/system/modules/ISC_Foundation.js"></script>
<script src="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/smartclient/isomorphic/system/modules/ISC_Containers.js"></script>
<script src="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/smartclient/isomorphic/system/modules/ISC_Grids.js"></script>
<script src="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/smartclient/isomorphic/system/modules/ISC_Forms.js"></script>
<script src="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/smartclient/isomorphic/system/modules/ISC_DataBinding.js"></script>
<script src="https://googledrive.com/host/0B9zLzpZ-06uFY1A2OG5Dd0k3TW8/smartclient/isomorphic/skins/Enterprise/load_skin.js"></script>
</head>
<body class="pageBackground">
<div id="content">
	<p>JUL example using <a target="_blank" href="http://smartclient.com/">SmartClient</a> 
	to render the component tree.
	</p>
</div>
<div id="footer">
  <script type="text/javascript">
  document.write('Copyright &copy; 2012 - ' + (new Date()).getFullYear() + ' The Zonebuilder. Powered by JUL ' + JUL.version);
  </script>
</div>
<script type="text/javascript">
// application instance
APP = {
	version: '1.0',
	parser: new JUL.UI.Parser({
		// SmartClient uses 'items' as container's 'children' property
		childrenProperty: 'items',
		// other properties which need to instantiate as components
		membersProperties: ['members', 'tabs', 'pane', 'dataSource'],
		// in SmartClient, IDs are automatically exposed as globals
		idProperty: 'ID',
		// simple factory to call 'create' utility if the component class is specified, 
		// or to return a config object otherwise
		customFactory: function(oConfig) {
			if (oConfig.xclass === 'Object') { return oConfig; }
			else { return isc[oConfig.xclass].create(oConfig); }
		}
	}),
	// initialization method that creates the UI
	init: function() {
		this.parser.create(this.ui, this.logic);
	}
};
// layout configration tree for the whole application
APP.ui = {
	xclass: 'Dialog',
	ID: 'mainDialog',
	title:"JUL + SmartClient Dialog",
    showShadow:true,
	autoSize: true,
	autoDraw: true,
	buttons: [isc.Dialog.OK, isc.Dialog.CANCEL],
	items: [
		{xclass: 'TabSet', width: 680, height: 350, selectedTab: 0, tabs: [
			{title: 'TreeGrid', pane: {
				xclass: 'TreeGrid',
				ID: 'supplyTree',
    			animateFolders: true,
		    	selectionType: 'single'
			}},
			{title: 'ListGrid', pane: {
				xclass: 'ListGrid',
				ID: 'supplyList',
				alternateRecordStyles: true,
		    	selectionType: 'single'
			}},
			{title: 'DynamicForm', pane: {
				xclass: 'DynamicForm',
				ID: 'supplyForm',
				numCols: 4,
				colWidths: [100, 200, 100, 200],
			    margin: 25,
				cellPadding: 5,
				autoFocus: false 				
			}}
		]}
 	]
};
// interface logic bounded by component IDs
APP.logic = {
	mainDialog: {
		okClick: function() {
			alert('Please fill the required info!');
		},
		cancelClick: function() {
			alert('Won\'t close for now.');
		},
		onCloseClick: function() {
			return false;
		}
	},
	supplyTree: {
			autoFetchData: true,
			loadDataOnDemand: false,
		dataSource: {
			xclass: 'DataSource',
			ID: 'supplyCategory',
			clientOnly: true,
			dataURL: '../data/supplyCategory.data.xml',
			recordXPath: '//supplyCategory',
			fields: [
				{name: 'categoryName', title: 'Item', type: 'text', length: 128, required: true, primaryKey: true},
				{name: 'parentID', hidden: true, type: 'text', required: true, foreignKey: 'supplyCategory.categoryName', rootValue: 'root'}
			]
		},
		nodeClick: function(viewer, node, recordNum) {
			supplyList.filterData({category: node.categoryName});
		}
	},
	supplyList: {
		autoFetchData: true,
		showAllRecords: true,
		dataSource: {
			xclass: 'DataSource',
			ID: 'supplyItem',
			clientOnly: true,
			dataURL: '../data/supplyItem.data.xml',
			recordXPath: '//supplyItem',
		fields: [
				{name: 'itemID', type: 'sequence', hidden: true, primaryKey: true},
				{name: 'itemName', type: 'text', title: 'Item', length: 128, required: true},
				{name: 'SKU', type: 'text', title: 'SKU', length: 10, required: true},
				{name: 'description', type: 'text', title: 'Description', length: 2000},
				{name: 'category', type: 'text', title: 'Category', length: 128, required: true, foreignKey: 'supplyCategory.categoryName'},
				{name: 'units', type: 'enum', title: 'Units', length: 5, valueMap: [
					'Roll', 'Ea', 'Pkt', 'Set', 'Tube', 'Pad', 'Ream', 'Tin', 'Bag', 'Ctn', 'Box'
				]},
				{name: 'unitCost', type: 'float', title: 'Unit Cost', required: true, validators: [
					{type: 'floatRange', min: 0, errorMessage: 'Please enter a valid (positive) cost'},
					{type: 'floatPrecision', precision: 2, errorMessage: 'The maximum allowed precision is 2'}
				]},
				{name: 'inStock', type: 'boolean', title: 'In Stock'},
				{name: 'nextShipment', type: 'date', title: 'Next Shipment'}
			]
		},
		recordClick: function(viewer, record, recordNum, field, fieldNum, value, rawValue) {
			supplyForm.setValues(record);
		}
	},
	supplyForm: {
		dataSource: 'supplyItem',
		useAllDataSourceFields: true
	}
};
// avoid automatic rendering if 'autoDraw' not specified
isc.setAutoDraw(false);
// start the application
APP.init();
</script>
</body>
</html>
